<template>
  <el-dialog title="编辑课程" :visible.sync="dialogVisible" width="1200px" :close-on-click-modal="false"
    :modal-append-to-body="false" v-drag2anywhere>
    <el-form :model="formData" ref="formData" size="mini" label-width="90px" :rules="rules">
      <el-row :gutter="8">
        <el-col>
          <div class="title">基本信息</div>
        </el-col>
        <el-col :span="8">
          <el-form-item label="课程名称" prop="title">
            <el-input v-model="formData.title" placeholder="课程名称"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="授课方式:" prop="type">
            <el-select v-model="formData.type" placeholder="授课类型">
              <el-option label="一对多" value="1"></el-option>
              <el-option label="一对一" value="2"></el-option>
              <el-option label="预约" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="课表颜色:" prop="color">
            <el-color-picker v-model="formData.color" :predefine="predefineColors">
            </el-color-picker>
          </el-form-item>
        </el-col>

        <el-col>
          <div class="title">收费标准</div>
          <div style="display: flex;">
            <div style="margin: 0px 0px 10px 10px; flex: 1;">可以添加多个收费项，从而制定多种营销策略</div>
            <el-button icon="el-icon-plus" type="primary" size="mini" @click="handleAddChargeRule">添加收费({{formData.rules.length+"/"+maxRule}})</el-button>
          </div>
        </el-col>
        <el-col>
          <el-table border :data="formData.rules">
            <el-table-column label="名称" prop="title">
              <template v-slot="scope">
                <el-input v-model="scope.row.title" placeholder="请输入名称(必填)"></el-input>
              </template>
            </el-table-column>

            <el-table-column label="数量" prop="count" width="140px" align="center">
              <template v-slot="scope">
                <el-input-number v-model="scope.row.count" placeholder="请输入名称" style="width: 100%;"
                  size="mini"></el-input-number>
              </template>
            </el-table-column>

            <el-table-column label="单位" prop="unit" width="100px" align="center">
              <template v-slot="scope">
                <el-select v-model="scope.row.unit" size="mini" @change="handleRuleTypeChange(scope.$index,scope.row)">
                  <el-option label="课时" value="课时"></el-option>
                  <el-option label="月" value="月"></el-option>
                  <el-option label="天" value="天"></el-option>
                </el-select>
              </template>
            </el-table-column>


            <el-table-column label="总价" prop="total" width="180px" size="mini" align="center">
              <template v-slot="scope">
                <el-input-number v-model="scope.row.total" placeholder="请输入总价" style="width: 100%;"
                  size="mini"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="单价" prop="price" align="center" width="120px">
              <template v-slot="scope">
                <b>{{(scope.row.total/scope.row.count).toFixed(2)}}</b>元/{{scope.row.unit}}
              </template>
            </el-table-column>
            <el-table-column label="有效期" >
              <template v-slot="scope">
                <div >
                  <!--如果有效期是固定日期类型-->
                  <div v-if="scope.row.exptype==4" style="display: flex;">
                  <el-date-picker v-model="scope.row.expdate"  type="date"  value-format="yyyy-MM-dd"  placeholder="选择日期"></el-date-picker>
                  <el-select v-model="scope.row.expunit" style="width: 160px;"  @change="handleExpTypeChange(scope.$index,scope.row)">
                    <el-option label="天" value="天"></el-option>
                    <el-option label="月" value="月"></el-option>
                    <el-option label="年" value="年"></el-option>
                    <el-option label="固定日期" value="固定日期"></el-option>
                  </el-select>
                  </div>

                  <div v-if="scope.row.exptype!=4" style="display: flex;">
                  <el-input  placeholder="永久有效" v-model="scope.row.expvalue" ></el-input>
                  <el-select v-model="scope.row.expunit" style="width: 160px;"  @change="handleExpTypeChange(scope.$index,scope.row)">
                    <el-option label="天" value="天"></el-option>
                    <el-option label="月" value="月"></el-option>
                    <el-option label="年" value="年"></el-option>
                    <el-option label="固定日期" value="固定日期"></el-option>
                  </el-select>
                  </div>
                </div>



              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="100px">
              <template v-slot="scope" >
                <el-button type="danger" icon="el-icon-delete" circle @click="handleDeleteRule(scope.$index,scope.row)" ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="line-height: 35px; padding: 0px 10px;border: 1px solid #EBEEF5; border-top: none; text-align: right;">
             提示：名称，数量，总价皆为必填数据，提交时会自动过滤无效数据
          </div>
        </el-col>
        <el-col style="margin-top: 20px;">
          <div class="title">课程简介</div>
           <el-input type="textarea" v-model="formData.desc" :rows="5" show-word-limit maxlength="500" placeholder="请输入此课程相关简介"></el-input>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" style="text-align: center;">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSave">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        maxRule:5,
        formData: {
          title: '',
          type: '1', //1  一对多  2 一对一
          color: '',
          rules: [{
            title: "测试课程",
            type: 1,
            unit: '课时',
            count: 40,
            total: 4000,
            price: 100,
            exptype:1,
            expunit:'天',
            expvalue:'',
            expdate:''
          }],
          desc:'',
        },
        predefineColors: [
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585'
          ],
        rules: {
          "title": [{
            message: "请正确课程名称!",
            trigger: 'blur',
            required: true
          }],
          "type": [{
            message: "请选择授课方式!",
            trigger: 'blur',
            required: true
          }]
        }
      }
    },
    methods: {
      handleRuleTypeChange(index,data){
       this.formData.rules[index].type=data.unit=="天"? 1:(data.expunit=="月"? 2:(data.expunit=="天"? 3:4));
        console.log(this.formData.rules[index]);
      },
      handleExpTypeChange(index,data){ //有效期类型设置
        if(data.expunit=="固定日期"){
           var nowdate=new Date();
           nowdate.setMonth(nowdate.getMonth()+1);
           var y=nowdate.getFullYear();
           var m=nowdate.getMonth();
           var d=nowdate.getDate();
           var formatedata=y+"-"+m+"-d";




           this.formData.rules[index].expdate=formatedata;
           this.formData.rules[index].exptype=4;
        }else{
          this.formData.rules[index].exptype=data.expunit=="课时"? 1:(data.expunit=="月"? 2:3);
        }
       },
      init(index,data) {
        this.index=index;
        this.formData=data;
      },
      handleAddChargeRule(){
        if(this.formData.rules.length>=5){
           this.$message.warning({message:"收费策略最多可添加"+this.maxRule+"条",duration:2500,showClose:true});
          return;
        }
        const rules={
          ruleid:-1,
          title: "",
          type: 1,
          unit: '课时',
          count: 1,
          total: 0,
          price: 0,
          exptype:'1',
          expvalue:"",
          expunit:'天',
          expdate:""
        };
        this.formData.rules.push(rules);
      },
      handleDeleteRule(index,data){
        this.formData.rules.splice(index,1);
      },
      handleCancel() {
        this.dialogVisible = false;
      },
      handleSave() {
        this.$refs.formData.validate(ok => {
          const params = {
            courseid:this.formData.courseid,
            title: this.formData.title,
            type: this.formData.type,
            color:this.formData.color,
            rules:this.formData.rules,
            desc:this.formData.desc
          }
          this.api_helper.post("api/admin/educational/course/update", params).then(res => {
            if (res.status == 200 && res.data.code == 1) {
              this.$message.success({
                message: res.data.msg,
                duration: 1500,
                showClose: true
              });
              this.dialogVisible = false;
              this.$emit("complete");
            } else {
              this.$message.error({
                message: res.data.msg,
                duration: 1500,
                showClose: true
              });
            }
          })
        });

      }
    }
  }
</script>

<style>
</style>
